<template>
    <!-- 游戏iframe -->
    <template v-if="isGamePlay">
        <div class="play-container">
            <iframe class="play-iframe" ref="gameIframe" :src="gamePlayUrl"></iframe>
        </div>
    </template>
    <!-- 状态 -->
    <template v-if="statusMsg">
        <div class="status-container">
            <!-- <span class="status-msg">{{ statusMsg }}</span> -->
        </div>
    </template>
    <!-- 弹出隐私政策协议 -->
    <template v-if="isShowPermission">
        <div class="permission-container">
        </div>
    </template>
    <!-- 弹出图片 -->
    <template v-if="isShowImg">
        <div class="qrcode-cover"></div>
        <!-- 弹出二维码图片 -->
        <template v-if="isShowImgType==1">
            <div class="qrcode-container">
                <img class="qrcode-img" :src="qrcodeImgUrl" />
                <span v-if="qrcodeImgCanClose" @click="closeQrcode" class="qrcode-close"></span>
            </div>
        </template>
        <!-- 弹出全屏图片 -->
        <template v-if="isShowImgType==2">
            <div class="full-screen-container">
                <img class="full-img" :src="qrcodeImgUrl" />
                <span v-if="qrcodeImgCanClose" @click="closeQrcode" class="qrcode-close"></span>
            </div>
        </template>
    </template>
    <!-- 登录背景图 -->
    <template v-if="isShowSdkBgImg">
        <div class="bg-img-container">
            <img class="bg-img" :src="gameBgUrl" />
        </div>
    </template>
    <!-- 功能页面 -->
    <div :class="{'sdk-ui':isShowSdkBgImg}">
        <div class="main-container">
            <template v-if="params.currentComponent === 'AccountSelectLogin'">
                <juheh5-account-select-login v-model="params" />
            </template>
            <template v-if="params.currentComponent === 'AccountToApkLogin'">
                <juheh5-account-to-apk-login v-model="params"
                :to-apk-cache-id="query.toapk_cache_id" />
            </template>
            <template v-else-if="params.currentComponent === 'PhoneReg'">
                <juheh5-phone-reg v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'AccountReg'">
                <juheh5-account-reg v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'Login'">
                <juheh5-login v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'BindPhone'">
                <juheh5-bind-phone v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'RetrievePassword'">
                <juheh5-retrieve-password v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'IdcardAuthenticate'">
                <juheh5-idcard-authenticate v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'Privacy'">
                <juheh5-privacy v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'Pay'">
                <juheh5-pay
                    v-model="params"
                    :order-params="orderParams"
                    :is-phone="isPhone"
                    :is-wechat="isWechat" />
            </template>
            <template v-else-if="params.currentComponent === 'PayQrcode'">
                <juheh5-pay-qrcode v-model="params"
                    :order-params="orderParams" />
            </template>
            <template v-else-if="params.currentComponent === 'IdcardAuthenticateWechat'">
                <juheh5-idcard-authenticate-wechat
                v-model="params"
                :account-info="accountInfo" />
            </template>
        </div>
    </div>
</template>
<script>
import http from '../../../services/http'
import commons from '../../../services/commons'

import Juheh5Login from '../../juheh5/Login/index.vue'
import Juheh5PhoneReg from '../../juheh5/PhoneReg/index.vue'
import Juheh5AccountReg from '../../juheh5/AccountReg/index.vue'
import Juheh5BindPhone from '../../juheh5/BindPhone/index.vue'
import Juheh5RetrievePassword from '../../juheh5/RetrievePassword/index.vue'
import Juheh5AccountSelectLogin from '../../juheh5/AccountSelectLogin/index.vue'
import Juheh5AccountToApkLogin from '../../juheh5/AccountToApkLogin/index.vue'
import Juheh5IdcardAuthenticate from '../../juheh5/IdcardAuthenticate/index.vue'
import Juheh5IdcardAuthenticateWechat from '../../juheh5/IdcardAuthenticateWechat/index.vue'
import Juheh5Privacy from '../../juheh5/Privacy/index.vue'
import Juheh5Pay from '../../juheh5/Pay/index.vue'
import Juheh5PayQrcode from '../../juheh5/PayQrcode/index.vue'

export default {
    components: {
        Juheh5Login,
        Juheh5PhoneReg,
        Juheh5AccountReg,
        Juheh5BindPhone,
        Juheh5RetrievePassword,
        Juheh5AccountSelectLogin,
        Juheh5AccountToApkLogin,
        Juheh5IdcardAuthenticate,
        Juheh5IdcardAuthenticateWechat,
        Juheh5Privacy,
        Juheh5Pay,
        Juheh5PayQrcode,
    },
    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            isDebug: 1, // 是否调试
            initSucc: false, // 是否初始化完成
            userId: 0, // 登录成功userid
            game: this.modelValue.game, // 游戏
            gameChannel: this.modelValue.gameChannel, // 渠道
            gameLoginConfig: this.modelValue.gameLoginConfig, // 登录配置
            query: this.modelValue.query, // 透传参数
            isWechat: this.modelValue.isWechat, // 是否在微信客户端打开
            isMinigame: this.modelValue.isMinigame, // 是否在微信小程序打开
            isPhone: this.modelValue.isPhone, // 是否在手机上打开
            wxOpenid: this.modelValue.wxOpenid, // 微信小程序用户openid
            openid: this.modelValue.openid, // 微信公众号用户openid
            gamePlayUrl: '', // 游戏入口地址
            isShowImg: 0, // 是否显示图片
            isShowImgType: 0, // 显示图片类型 1二维码 2全屏图
            isShowPermission: 0, // 是否现在隐私政策
            isShowSdkBgImg: 0, // 是否显示背景图片
            gameBgUrl: '', // 背景图片url
            qrcodeImgUrl: '', // 弹出二维码
            qrcodeImgCanClose: 1, // 弹出二维码可否关闭
            payQrcodeImgUrl: '', // 支付公众号二维码
            isH5Login: 0, // H5是否已完成登录
            h5LoginData: {}, // H5登录成功返回数据
            isH5CheckPhoneBind: 0, // H5是否处理完绑定手机逻辑
            isH5CheckIdcardBind: 0, // H5是否处理完实名逻辑
            h5ToApkQrcodeImgUrl: '', // 转端二维码
            loginCbid: '', // 登录回调给jssdk的cbid
            accountInfo: {}, // 绑定的官包账号信息
            params: {
                gameId: this.modelValue.game.game_id,
                currentComponent: '', // 当前页面
                currentComponentTab: '', // 页面标签
                lastComponent: '',
                lastComponentTab: '',
                generateAccount: true,
                payJumpQrcodeUrl: '', // 二维码支付链接
            },
            orderParams: {}, // 支付订单信息
            iosInStandalone: 0, // 是否在主屏幕上打开
            iosSaveToHomeScreen: false, // 是否要弹出iOS引导保存到主屏幕
            toApkCacheId: '', // 转端cache_id
            checkPaySuccessOrderNum: 0, // 检测支付成功次数
            checkPaySuccessOrderMax: 5, // 检测支付成功最多次数
            statusMsg: '', // 左上角程序状态显示
        };
    },
    computed: {
        isGamePlay() {
            return this.initSucc && this.gamePlayUrl;
        },
    },
    mounted() {
        this.printStatusMsg('主进程初始化中...')
        this.gamePlayUrl = this.gameChannel.game_url
        this.payQrcodeImgUrl = this.gameChannel.offiaccount_qrcode_url
        this.gameBgUrl = this.gameChannel.game_bg_url
        if (this.gameBgUrl.length > 1) {
            this.isShowSdkBgImg = 1
        }
        if (this.query.hasOwnProperty('toapk_cache_id')) {
            this.toApkCacheId = this.query.toapk_cache_id
        }

        // 处理H5账号登录回调
        var juheh5Cb = {
            loginCb: this.h5LoginCb,
            phoneBindCb: this.h5PhoneBindCb,
            idcardBindCb: this.h5IdcardBindCb,
            idcardBindWechatCb: this.h5IdcardBindWechatCb,
        }
        window.juheh5Cb = juheh5Cb

        this.checkIosSaveToHomeScreen()

        this.initSucc = true
        this.printStatusMsg('唤起游戏...', false)

        this.windowJuheh5CbApk('cbApkInit', this.modelValue.cbApkInitData)
    },
    methods: {
        // 打印调试信息
        printDebug(...args) {
            if (!this.isDebug == 1) {
                return
            }
            let now = commons.formatDate(new Date(), 'Y-m-d H:i:s.u')
            let params = Array.prototype.slice.call(args);
            console.log('[TKSDK DEBUG]['+now+']', JSON.stringify(params))
        },
        // 打印到主屏幕上信息
        printStatusMsg(msg, auto_close = 1) {
            const _this = this
            _this.statusMsg = msg
            _this.printDebug('printStatusMsg', msg)
            if (auto_close == 1) {
                setTimeout(() => {
                    if (_this.statusMsg == msg) {
                        _this.statusMsg = ''
                    }
                }, 2000);
            }
        },
        // 是否要弹出iOS引导保存到主屏幕
        checkIosSaveToHomeScreen() {
            const _this = this

            // 如果在微信上，或者不在手机上，不在ios上
            if (_this.isWechat || !_this.isPhone || _this.query.device_type != 2) {
                return
            }

            // 如果不含有转端标签，则package_id>0都引导保存主屏幕
            if (_this.toApkCacheId.length < 1) {
                // 是否含有转端标签
                if (!_this.query.hasOwnProperty('package_id') || _this.query.package_id < 1) {
                    return
                }
            }

            // 如果已经在主屏幕上打开的，则无需弹出
            var standalone = window.matchMedia('(display-mode: standalone)').matches
            if (standalone) {
                _this.iosInStandalone = 1
                return
            }

            _this.iosSaveToHomeScreen = true
            this.isShowSdkBgImg = 0

            _this.qrcodeImgUrl = 'https://sdk-server.tkungame.com/images/ios_toapk.png'
            _this.openQrcode(2, 0)
        },
        // 向iframe发送异步消息
        postMessageToIframe(event_name, params, cbid) {
            if (this.$refs.gameIframe.contentWindow) {
                this.$refs.gameIframe.contentWindow.postMessage({
                    event_name: event_name,
                    params: params,
                    cbid: cbid
                }, '*');
            }
        },
        // 处理来自iframe的消息
        handleMessageToIframe(event_name, params, cbid) {
            const _this = this
            this.printDebug('收到iframe消息', event_name, params, cbid)
            switch (event_name) {
                case 'init':
                    _this.jssdkInit(params, cbid)
                    break;
                case 'firstupSend':
                    _this.jssdkFirstupSend(params, cbid)
                    break;
                case 'login':
                    _this.jssdkLogin(params, cbid)
                    break;
                case 'loginSuccess':
                    _this.jssdkLoginSuccess(params, cbid)
                    break;
                case 'pay':
                    _this.jssdkPay(params, cbid)
                    break;
                case 'h5toapk':
                    _this.jssdkH5toapk(params, cbid)
                    break;
                case 'adviewLoad':
                    _this.jssdkAdviewLoad(params, cbid)
                    break;
                case 'adviewShow':
                    _this.jssdkAdviewShow(params, cbid)
                    break;
            }
        },
        windowJuheh5CbApk(funcname, params) {
            if (window.XPH5 && window.XPH5.hasOwnProperty(funcname)) {
                window.XPH5[funcname](0, 'success', JSON.stringify(params))
                return true
            }

            return false
        },
        // jssdk初始化
        jssdkInit(params, cbid) {
            const _this = this
            _this.printStatusMsg('jssdk初始化...', false)
            _this.postMessageToIframe('init', {
                code: 0, msg: 'success', data: {
                    query: JSON.stringify(_this.query),
                    openid: _this.openid,
                    wx_openid: _this.wxOpenid,
                    ios_in_standalone: _this.iosInStandalone,
                    toapk_cache_id: _this.toApkCacheId,
                    game_channel_id: _this.gameChannel.id,
                }
            }, cbid)
        },
        // jssdk激活成功回调
        jssdkFirstupSend(params, cbid) {
            const _this = this
            _this.windowJuheh5CbApk('cbApkFirstup', params)
        },
        // jssdk登录
        jssdkLogin(params, cbid) {
            const _this = this
            _this.printStatusMsg('jssdk登录...', false)
            // 如果当前正在引导用户保存ios到主屏幕，则不进行登录逻辑
            if (_this.iosSaveToHomeScreen) {
                return
            }

            // 如果是微信，则直接返回openid相关给jssdk即可
            if (_this.isWechat) {
                _this.postMessageToIframe('login', {
                    code: 0, msg: 'success', data: {
                        openid: _this.openid,
                        wx_openid: _this.wxOpenid
                    }
                }, cbid)
                _this.closeSdkBgImg()

                _this.printStatusMsg('sdk登录成功...', false)
                layer.msg('登录成功', { time: 1000 })
                return
            }

            // 如果是H5，则唤起登录页面
            _this.loginCbid = cbid
            _this.showH5Login()
        },
        // jssdk登录成功
        jssdkLoginSuccess(params, cbid) {
            const _this = this
            _this.userId = params.user_id
            _this.windowJuheh5CbApk('cbApkLogin', params)
            _this.checkPaySuccessOrders()
            _this.checkAccountByWechat(params)
            _this.printStatusMsg('jssdk登录成功...', false)
        },
        // jssdk支付
        jssdkPay(params, cbid) {
            const _this = this
            _this.checkPaySuccessOrders()

            // 如果在小程序里，弹出二维码
            if (_this.isMinigame) {
                _this.qrcodeImgUrl = _this.payQrcodeImgUrl
                _this.openQrcode(1, 1)
                return
            }

            // 如果在手机微信里，直接弹出支付
            if (_this.isWechat && _this.isPhone) {
                var params = {
                    trade_no: params.trade_no,
                    pay_platform: 151,
                }
                http.post('/switch_pay/click_pay', params, function(code, msg, data) {
                    if (code !== 0) {
                        layer.msg(msg)
                        return
                    }
                    _this.wechatPay(data.bridge)
                }, true);
                return
            }

            // 如果在H5、pc端、pc微信端，弹出支付页面
            _this.orderParams = params
            _this.params.currentComponent = 'Pay'
        },
        // 外部调用 定时获得支付成功的订单
        checkPaySuccessOrders() {
            const _this = this
            // 如果已经在处理中，则将其重置为0次，并直接返回
            if (_this.checkPaySuccessOrderNum > 0) {
                _this.checkPaySuccessOrderNum = 0
                return
            }

            _this.checkPaySuccessOrdersTimeout()
        },
        checkPaySuccessOrdersTimeout() {
            const _this = this
            // 循环次数完毕返回
            if (_this.checkPaySuccessOrderNum >= _this.checkPaySuccessOrderMax) {
                _this.checkPaySuccessOrderNum = 0
                return
            }
            _this.checkPaySuccessOrderNum++

            var params = {
                user_id: _this.userId
            }
            http.post('/api/pay/orders_call_client', params, function(code, msg, data) {
                if (code !== 0) {
                    return
                }
                for (const item of data) {
                    _this.windowJuheh5CbApk('cbApkPay', item)
                }
            }, false);

            setTimeout(() => {
                _this.checkPaySuccessOrdersTimeout()
            }, 30000);
        },
        // h5转端
        jssdkH5toapk(params, cbid) {
            const _this = this
            _this.printStatusMsg('jssdk角色登录...')
            if (!_this.isMinigame) {
                return
            }

            params.game_channel_id = _this.gameChannel.id
            http.post('/api/h5/toapk/check', params, function(code, msg, data) {
                if (code !== 0) {
                    return
                }
                if (data.can_switch != 1) {
                    return
                }

                // 弹出二维码引导转端
                if (data.type == 1) {
                    _this.qrcodeImgUrl = data.show_qrcode_url
                    var can_close = data.can_close ?? 0
                    _this.openQrcode(1, can_close)
                    return
                }
            }, true);
        },
        // 激励广告-加载广告
        jssdkAdviewLoad(params, cbid) {
            const _this = this
            params.user_id = _this.userId
            params.cbid = cbid
            let ret = _this.windowJuheh5CbApk('cbApkAdviewLoad', params)
            if (!ret) {
                layer.msg('请在壳上调用')
                _this.postMessageToIframe('juheh5AdviewLoadCb', {
                    code: 1099, msg: '请在壳上调用', data: {}
                }, cbid)
            }
        },
        // 激励广告-播放广告
        jssdkAdviewShow(params, cbid) {
            const _this = this
            params.user_id = _this.userId
            params.cbid = cbid
            let ret = _this.windowJuheh5CbApk('cbApkAdviewShow', params)
            if (!ret) {
                layer.msg('请在壳上调用')
                _this.postMessageToIframe('juheh5AdviewLoadCb', {
                    code: 1099, msg: '请在壳上调用', data: {}
                }, cbid)
            }
        },
        // 激励广告-加载广告结果
        juheh5AdviewLoadCb(params) {
            let msg = 'juheh5AdviewLoadCb '+ JSON.stringify(params)
            layer.alert(msg)

            let cbid = params.data.cbid
            _this.postMessageToIframe('juheh5AdviewLoadCb', {
                code: params.code, msg: '', data: {}
            }, cbid)
        },
        // 激励广告-播放广告结果
        juheh5AdviewShowCb(params) {
            let msg = 'juheh5AdviewShowCb '+ JSON.stringify(params)
            layer.alert(msg)

            let cbid = params.data.cbid
            _this.postMessageToIframe('juheh5AdviewShowCb', {
                code: params.code, msg: '', data: {}
            }, cbid)
        },
        // 打开二维码
        openQrcode(type = 1, can_close = 1) {
            this.isShowImgType = type
            this.qrcodeImgCanClose = can_close
            this.isShowImg = 1
        },
        // 关闭二维码显示
        closeQrcode() {
            this.isShowImg = 0
        },
        // 展示H5登录页面
        showH5Login() {
            const _this = this
            // 如果是转端过来的，则尝试自动登录
            if (_this.toApkCacheId.length > 1) {
                _this.params.currentComponent = 'AccountToApkLogin'
                return
            }

            let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || []
            if (localAccountInfo.length === 0) {
                _this.params.currentComponent = 'Login'
                _this.params.currentComponentTab = 'PASSWORD_LOGIN';
            } else {
                _this.params.currentComponent = 'AccountSelectLogin'
            }
        },
        // 展示H5实名认证
        showH5IdcardBind() {
            const _this = this
            if (_this.isH5CheckIdcardBind == 1) {
                return
            }
            _this.isH5CheckIdcardBind = 1

            if (_this.isH5Login != 1) {
                return
            }

            // 如果在微信里不弹出实名
            if (_this.isWechat) {
                return
            }

            // 如果已经实名
            if (_this.h5LoginData.idcard != '') {
                return
            }

            // 配置是否弹出实名
            if (_this.gameLoginConfig.need_idcard != 1) {
                return
            }

            _this.params.currentComponent = 'IdcardAuthenticate'
            _this.params.currentComponentTab = ''

            return true
        },
        // 展示H5绑定手机
        showH5PhoneBind() {
            const _this = this

            if (_this.isH5CheckPhoneBind == 1) {
                return
            }
            _this.isH5CheckPhoneBind = 1

            if (_this.isH5Login != 1) {
                return
            }

            // 如果已经绑定手机
            if (_this.h5LoginData.phone != '') {
                return
            }

            // 配置是否弹出绑定手机
            if (_this.gameLoginConfig.show_bind_phone != 1) {
                return
            }

            _this.params.currentComponent = 'BindPhone'
            _this.params.currentComponentTab = ''

            return true
        },
        // H5登录回调
        h5LoginCb(code, msg, data) {
            const _this = this
            if (code !== 0) {
                layer.msg(msg, { time: 1000 })
                return
            }
            data = JSON.parse(data);

            _this.isH5Login = 1
            _this.h5LoginData = data
            _this.params.currentComponent = ''

            _this.printStatusMsg('sdk登录成功...', false)
            layer.msg('登录成功', { time: 1000 })

            _this.loginCbToAJssdk()
        },
        // H5绑定手机回调
        h5PhoneBindCb(code, msg, data) {
            const _this = this
            _this.params.currentComponent = ''
            _this.params.currentComponentTab = ''

            data = JSON.parse(data)
            if (Object.keys(data).length != 0) {
                _this.h5LoginData = data
            }

            _this.loginCbToAJssdk()
        },
        // H5实名认证回调
        h5IdcardBindCb(code, msg, data) {
            const _this = this
            _this.params.currentComponent = ''
            _this.params.currentComponentTab = ''

            data = JSON.parse(data)
            if (Object.keys(data).length != 0) {
                _this.h5LoginData = data
            }

            _this.loginCbToAJssdk()
        },
        // 微信端H5实名认证回调
        h5IdcardBindWechatCb(code, msg, data) {
            const _this = this
            _this.params.currentComponent = ''
            _this.params.currentComponentTab = ''
        },
        // H5层面登录完成回调给jssdk
        loginCbToAJssdk() {
            const _this = this
            if (_this.showH5IdcardBind()) {
                return
            }

            if (_this.showH5PhoneBind()) {
                return
            }

            _this.closeSdkBgImg()

            // 将数据返回给jssdk
            _this.postMessageToIframe('login', {
                code: 0, msg: 'success', data: {
                    token: _this.h5LoginData.token,
                    user_id: _this.h5LoginData.openid,
                    time: _this.h5LoginData.last_login_time,
                    sign: _this.h5LoginData.sign,
                    h5_openid: _this.h5LoginData.openid,
                }
            }, _this.loginCbid)
        },
        // 微信打开游戏登录成功后，获得绑定账号信息
        checkAccountByWechat(login_data) {
            const _this = this

            // 不在微信，则会由H5端去处理
            if (!_this.isWechat) {
                return
            }
            var params = {
                channel: login_data.channel,
                channel_openid: login_data.channel_openid,
                user_id: login_data.user_id,
                ht_user_id: login_data.ht_user_id,
            }
            http.post('/api/h5sdk/get_account_info', params, function(code, msg, data) {
                if (code !== 0) {
                    return
                }
                _this.accountInfo = data

                // 如果在小程序，则由小程序去处理
                if (_this.isMinigame) {
                    return
                }

                // if (data.idcard == '' && _this.gameLoginConfig.need_idcard == 1) {
                //     _this.params.currentComponent = 'IdcardAuthenticateWechat'
                // }
            }, false);
        },
        // 延迟关闭登录背景，友好的过渡到游戏页面
        closeSdkBgImg() {
            const _this = this
            setTimeout(() => {
                _this.isShowSdkBgImg = 0
            }, 1000);
        },
        // 直接在手机微信里唤起微信支付
        wechatPay(bridge) {
            const _this = this
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId":bridge.appId, // 公众号名称，由商户传入
                    "timeStamp":bridge.timeStamp.toString(), // 时间戳，自1970年以来的秒数
                    "nonceStr":bridge.nonceStr, // 随机串
                    "package":bridge.package,
                    "signType":"MD5",         // 微信签名方式：
                    "paySign":bridge.paySign // 微信签名
                },
                function(res){
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        layer.msg('支付成功')
                    }else{
                        // 支付失败
                        layer.msg('支付未完成！')
                    }
                }
            )
        },
    },
};
</script>

<style lang="scss" scoped>
$designWidth: 640;
@function px2rem($px){
	@return calc($px*320/$designWidth/20) + rem;
}

.play-container {
    position: fixed;
    width: px2rem(640);
    height: 100%;
}

.play-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.status-container {
    position: absolute;
    z-index: 10;
    padding: px2rem(15);

    .status-msg {
        color: #fff;
        font-size: px2rem(15);
    }
}

.qrcode-cover {
    background-color: rgb(0,0,0,0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

.qrcode-container {
    z-index: 9999;
    width: 75%;
    aspect-ratio: 595 / 842;
    padding: 0;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}

.full-screen-container {
    z-index: 9999;
    width: 100%;
    height: 100%;
    aspect-ratio: 595 / 842;
    padding: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.full-img {
    width: 100%;
    height: 100%;
}

.qrcode-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.qrcode-close {
    position: absolute;
    right: 0.6rem;
    top: 0.6rem;
    width: 0.6rem;
    height: 0.6rem;
    background: url(/images/icon_close.png) no-repeat 0 0;
    background-size: 100% 100%;
}

.bg-img-container {
    width: 100%;
    height: 100%;
    aspect-ratio: 595 / 842;
    padding: 0;
    position: absolute;
    z-index: 9;
    left: 50%;
    transform: translateX(-50%);

    .bg-img {
        width: 100%;
        height: 100%;
    }
}

.sdk-ui {
    position: relative;
    z-index: 10;
    height: 100%;
    width: px2rem(640);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
</style>
